<template>
  <div class="search">
    <el-form :model="searchForm" ref="formRef" label-width="80px" size="large">
      <el-row :gutter="20">
        <template v-for="item in searchConfig.formItems" :key="item.prop">
          <el-col :span="8">
            <el-form-item :label="item.label" :prop="item.prop">
              <template v-if="item.type === 'input'">
                <el-input
                  v-model="searchForm[item.prop]"
                  :placeholder="item.placeholder"
                />
              </template>
              <template v-if="item.type === 'date-picker'">
                <el-date-picker
                  v-model="searchForm[item.prop]"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </template>
              <template v-if="item.type === 'select'">
                <el-select
                  v-model="searchForm[item.prop]"
                  :placeholder="item.placeholder"
                  style="width: 100%"
                >
                  <template v-for="option in item.options" :key="option.value">
                    <el-option :label="option.label" :value="option.value" />
                  </template>
                </el-select>
              </template>
            </el-form-item>
          </el-col>
        </template>
      </el-row>
    </el-form>
    <div class="btns">
      <el-button icon="Refresh" @click="handleReset">重置</el-button>
      <el-button type="primary" icon="Search" @click="handleSearch"
        >查询</el-button
      >
    </div>
  </div>
</template>

<script setup lang="ts">
// 模块引入
import { ref, reactive } from 'vue'
import {
  ElForm,
  ElFormItem,
  ElRow,
  ElCol,
  ElButton,
  ElInput,
  ElDatePicker,
  ElSelect,
  ElOption
} from 'element-plus'
import type { FormInstance } from 'element-plus'
import type { ISearchCompProps } from '../types.ts/index.ts'
defineOptions({
  // 组件名称
  name: 'PageSearch',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})
const props = defineProps<ISearchCompProps>()
const initialForm: Record<string, any> = []
for (const item of props.searchConfig.formItems) {
  initialForm[item.prop] = item.initialValue ?? ''
}

const formRef = ref<FormInstance>()
const searchForm = reactive(initialForm)
const emit = defineEmits(['queryClick', 'resetClick'])

function handleReset() {
  formRef.value?.resetFields()
  emit('resetClick')
}

function handleSearch() {
  emit('queryClick', searchForm)
}
</script>

<style scoped lang="scss"></style>
